<template>
  <div id="app">
    <vue-particles
      color="#555"
      :particleOpacity="0.6"
      :particlesNumber="70"
      shapeType="circle"
      :particleSize="2"
      linesColor="#555"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
    >
    </vue-particles>
    <div class="login-box">
      <!-- 通过:rules="loginFormRules"来绑定输入内容的校验规则 -->
      <el-form
        :rules="loginFormRules"
        ref="addFormRef"
        :model="addForm"
        label-position="right"
        label-width="auto"
        show-message
      >
        <span class="login-title">注册</span>
        <div style="margin-top: 5px"></div>
        <el-form-item label="用户名" prop="username">
          <el-col :span="22">
            <el-input type="text" v-model="addForm.username"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-col :span="22">
            <el-input type="password" v-model="addForm.password"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="确认密码" prop="password">
          <el-col :span="22">
            <el-input type="password" v-model="surePassword"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-col :span="6"
            ><el-button type="primary" @click="addUser">注册</el-button></el-col
          ><el-col :span="12"
            ><el-button type="primary" @click="clear">重置</el-button></el-col
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      addForm: {
        username: "",
        password: "",
      },
      surePassword: "",
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      loginFormRules: {
        username: [
          { required: true, message: "账号不可为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不可为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    addUser() {
      if (this.addForm.password != this.surePassword) {
        this.$message.error("输入的两次密码不一致");
        return;
      }
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post("register", this.addForm);
        console.log(res);
        if (res.code != 200) {
          return this.$message.error(res.msg);
        }
        this.$message.success("注册成功！");
        this.$router.push({ path: "/login" });
      });
    },
    clear() {
      this.addForm.username = "";
      this.addForm.password = "";
    },
  },
};
</script>
<style scoped>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
}
.login-box {
  border: 1px solid #dcdfe6;
  width: 350px;
  margin: 15% auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px black;
}
.login-title {
  text-align: center;
  margin: 0 auto 40px auto;
  color: black;
  font-size: 30px;
  font-weight: bold;
  position: relative;
  left: 42%;
}
.lizi {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
}
el-form-item {
  height: 100px;
}
</style>